<template>
	<div class="passNamber">
		<div class="passNumber_title"></div>
		<div id="passNumber_chart"></div>
	</div>
</template>

<script>
	import { passNumber } from '../api/api'
	export default {
		mounted() {
			this.getPassNumber();
		},
		methods: {
			getPassNumber() {
				let _this = this;
				let sendData = {};
				passNumber(sendData).then(response => {
					let status = response.status;
					if(status == 200) {
						let datas = response;
						console.log(datas)
						_this.passNumber_chart(datas);
//						console.log(response.data)
					} else {
						console.log(status);
						
					}
				}).catch(error => {
					console.log('error');
				});
			},
			passNumber_chart(datas) {
				console.log(datas)
//				let datas = {
//					"status": 0,
//					"message": "",
//					"data": {
//						"player_num": 21726,
//						"stops": [{
//							"stopid": 5,
//							"currentpass": 3186,
//							"stop": "5km",
//							"group": "stopsfull",
//							"loc": {
//								"lat": 0,
//								"long": 0
//							}
//						}, {
//							"stopid": 10,
//							"currentpass": 3031,
//							"stop": "10km",
//							"group": "stopsfull",
//							"loc": {
//								"lat": 0,
//								"long": 0
//							}
//						}, {
//							"stopid": 15,
//							"currentpass": 2992,
//							"stop": "15km",
//							"group": "stopsfull",
//							"loc": {
//								"lat": 0,
//								"long": 0
//							}
//						}, {
//							"stopid": 20,
//							"currentpass": 2735,
//							"stop": "20km",
//							"group": "stopsfull",
//							"loc": {
//								"lat": 0,
//								"long": 0
//							}
//						}, {
//							"stopid": 25,
//							"currentpass": 2686,
//							"stop": "25km",
//							"group": "stopsfull",
//							"loc": {
//								"lat": 0,
//								"long": 0
//							}
//						}, {
//							"stopid": 25,
//							"currentpass": 2675,
//							"stop": "25km",
//							"group": "stopsfull",
//							"loc": {
//								"lat": 0,
//								"long": 0
//							}
//						}, {
//							"stopid": 30,
//							"currentpass": 2631,
//							"stop": "30km",
//							"group": "stopsfull",
//							"loc": {
//								"lat": 0,
//								"long": 0
//							}
//						}, {
//							"stopid": 35,
//							"currentpass": 2552,
//							"stop": "35km",
//							"group": "stopsfull",
//							"loc": {
//								"lat": 0,
//								"long": 0
//							}
//						}, {
//							"stopid": 40,
//							"currentpass": 2565,
//							"stop": "40km",
//							"group": "stopsfull",
//							"loc": {
//								"lat": 0,
//								"long": 0
//							}
//						}, {
//							"stopid": 42,
//							"currentpass": 2598,
//							"stop": "42km",
//							"group": "stopsfull",
//							"loc": {
//								"lat": 0,
//								"long": 0
//							}
//						}]
//					}
//				}
				let xAxiss = []; //横坐标
				let yAxiss = []; //纵坐标
				let labels = [];
				let total = datas.data.player_num;
				let barData = [];
				datas.data.stops.forEach(function(item) {
					xAxiss.push(item.stop);
					yAxiss.push(((item.currentpass / total) * 100).toFixed(2));
					labels.push(item.currentpass);
					barData.push(100);
				})

//				console.log(labels);
//				console.log(yAxiss);

				// 基于准备好的dom，初始化echarts实例
				let passNumber_chart = this.$echarts.init(document.getElementById('passNumber_chart'));

				// 颜色
				var lightBlue = {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [{
						offset: 0,
						color: 'rgba(41, 121, 255, 1)' // 0% 处的颜色
					}, {
						offset: 1,
						color: 'rgba(0, 192, 255, 1)' // 100% 处的颜色
					}],
					globalCoord: false // 缺省为 false
				}
				// 纹理
				var piePane = ''
				var piePatternImg = new Image();
				piePatternImg.src = piePane;
				// 图标

				//var alldata = [49, 80, 67];
				// 指定图表的配置项和数据
				var option = {
					tooltip: {
						show: false
					},
					grid: {
						top: '25%',
						left: '0%',
						right: '0%',
						bottom: '15%',
					},
					xAxis: {
						data: xAxiss,
						offset: 0,
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						axisLabel: {
							color: '#fff',
							fontSize: 14
						}
					},
					yAxis: {
						min: 0,
						max: 100,
						splitLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						axisLabel: {
							show: false
						}
					},
					series: [{
						type: 'bar',
						renderItem: function(params, api) {
//							console.log(params)
							// ...
						},
						itemStyle: {
							color: lightBlue
						},
						barWidth: '40%',
						data: yAxiss,
						z: 10
					}, {
						type: 'bar',
						barGap: '-100%',
						itemStyle: {
							color: {
								image: piePatternImg,
								repeat: 'repeat'
							},
							opacity: 0.05
						},
						barWidth: '40%',

						data: barData,
						z: 5
					}, {
						type: 'bar',
						barGap: '-100%',
						itemStyle: {
							color: '#536dfe',
							opacity: 0.5
						},
						barWidth: '40%',

						data: barData,
						z: 5,
						label: {
							show: true,
							position: 'top',
							padding: 10,
							color: '#ffffff',
							fontSize: 14,
							distance: 0,
							formatter: function(params) {
//								console.log(params);
								let str = labels[params.dataIndex] + "\n" + yAxiss[params.dataIndex] + "%"
								return str;
							}
						},
					}],
					backgroundColor: "#190c12",
				};

				passNumber_chart.setOption(option)
			}
		}
	}
</script>

<style lang="less">
	.passNamber {
		width: 100%;
		height: 20vh;
		background: #fff;
		.passNumber_title {
			width: 100%;
			height: 3.125vh;
			background: #fff;
		}
		#passNumber_chart {
			width: 100%;
			height: 16.875vh;
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
				color: green;
			}
		}
	}
</style>